<template>
  <div id="app" class="modern-app">
    <router-view />
    <!-- 全局组件 -->
    <GlobalLoading :loading="globalLoading" :text="loadingText" />
    <MessageToast />
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import GlobalLoading from './components/GlobalLoading.vue'
import MessageToast from './components/MessageToast.vue'

export default {
  name: 'App',
  components: {
    GlobalLoading,
    MessageToast
  },
  setup() {
    const store = useStore()

    const globalLoading = computed(() => store.getters['app/loading'])
    const loadingText = computed(() => store.getters['app/loadingText'])

    return {
      globalLoading,
      loadingText
    }
  }
}
</script>

<style lang="scss">
#app {
  height: 100vh;
  width: 100%;
  background: var(--bg-secondary);
  font-family: var(--font-family-sans);
  color: var(--text-primary);
  overflow-x: hidden;
}

.modern-app {
  position: relative;
  min-height: 100vh;
}

// 简约滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);

  &:hover {
    background: var(--gray-400);
  }
}

// Firefox 滚动条
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}

// 简约焦点样式
*:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

*:focus:not(:focus-visible) {
  outline: none;
}
</style>
